<template>
  <div style="height: calc(100% - 44px)">
    <div class="app-container edit-vmi-container">
      <a-breadcrumb style="margin-bottom: 20px">
        <a-breadcrumb-item>系统设置</a-breadcrumb-item>
        <a-breadcrumb-item>供应商管理</a-breadcrumb-item>
      </a-breadcrumb>
      <div class="tabs-wrap pt10">
        <a-tabs :default-active-key="activeTabs" @change="changeTabs">
          <a-tab-pane key="1" title="账户信息">
            <FactoryAccountInfo :detailInfo="zhInfo" ref="accountInfoRef" />
          </a-tab-pane>
          <a-tab-pane key="2" title="品牌信息">
            <FactoryBrandInfo :detailInfo="zhInfo" ref="brandInfoRef" />
          </a-tab-pane>
          <a-tab-pane key="3" title="生产周期设置">
            <CycleTime />
          </a-tab-pane>
          <a-tab-pane key="4" disabled>
            <template #title>
              <div>
                <a-button v-if="activeTabs === '1'" type="primary" class="mr16" @click="saveInfo">保存</a-button>
                <a-button v-if="activeTabs === '1'" type="outline" @click="$router.push({ path: '/suppliers/mange' })"
                  >取消</a-button
                >
              </div>
            </template>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import FactoryAccountInfo from "./components/FactoryAccountInfo.vue";
import FactoryBrandInfo from "./components/FactoryBrandInfo.vue";
import CycleTime from "./components/CycleTime.vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import { getOwnVmiDetail, editOwnVmi } from "@/apis/business";
import { Message } from "@arco-design/web-vue";

const factoryId = ref("");
const accountInfoRef = ref();
const brandInfoRef = ref();
const activeTabs = ref("1");
const zhInfo = ref({});

onMounted(() => {
  factoryId.value = route.query.factoryId;
  if (factoryId.value) {
    getDetail();
  }
});

const getDetail = () => {
  getOwnVmiDetail({ factoryId: factoryId.value }).then(res => {
    console.log("供应商详情===", res);
    if (res.code === 200) {
      zhInfo.value = res.data;
    }
  });
};

const saveInfo = async () => {
  console.log("编辑操作");
  // console.log("保存工厂端账户信息");
  const { accountInfo } = await accountInfoRef.value.getFormData();
  // const brandForm = await brandInfoRef.value.getFormData();
  console.log("账户信息Form===", accountInfo);
  // return
  if (JSON.stringify(accountInfo) !== "{}") {
    editOwnVmi({ factoryId: factoryId.value, ...accountInfo })
      .then(res => {
        if (res.code === 200) {
          Message.success("账户信息保存成功");
          //跳转回供应商列表页
          // router.push({
          //   path: "/suppliers/mange"
          // });
        } else {
          Message.error(res.msg);
        }
      })
      .catch(err => {
        Message.error(err.message);
      });
  }
};

/**
 * 切换tabs
 */
const changeTabs = val => {
  activeTabs.value = val;
};
</script>

<style scoped lang="scss">
@import "index";
:deep(.jzt-arco-input-number) {
  .arco-input-wrapper {
    border: 1px solid #dcdfe6 !important;
  }
}
:deep(.arco-input-wrapper),
:deep(.arco-select-view-single),
:deep(.arco-picker),
:deep(.arco-select-view-multiple),
:deep(.arco-textarea-wrapper) {
  border: none !important;
}
:deep(.arco-select-view-multiple.arco-select-view-disabled) {
  border: 1px solid #dcdfe6 !important;
}
:deep(.arco-tabs-content) {
  padding-top: 0;
}
:deep(.arco-tabs-nav-tab-list) {
  width: 100%;
  .arco-tabs-tab {
    height: 50px;
  }
  .arco-tabs-tab.arco-tabs-tab-disabled {
    float: right;
  }
}
.edit-vmi-container {
  height: 100%;
  overflow-y: auto;
  .tabs-wrap {
    background-color: white;
    border-radius: 10px 10px 0 0;
  }
}
</style>
